<template>
  <div class="container">
    <div class="header">
      <div class="title">后台管理系统</div>
      <div class="history">
        <router-link to="/backstage" tag="span">首页</router-link>
        <span v-for="(item, i) in historylist" :key="i" @click="phistory(i)">
          / {{ item }}</span
        >
      </div>
    </div>
    <div class="aside-menu">
      <div class="logomsg">
        <div class="pic" @click="personmsg">
          <img
            src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2042867885,3348151267&fm=26&gp=0.jpg"
            alt=""
          />
        </div>
        <div class="msg">
          <h5>{{username}}</h5>
          <div class="state">
            <span>在线</span>
            <span @click="cancel">
              <i class="el-icon-eleme"></i>
              注销
            </span>
          </div>
        </div>
      </div>

      <el-row class="tac">
        <el-col :span="12">
          <el-menu
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            background-color="#487eb0"
            text-color="#dcdde1"
            active-text-color="#ffd04b"
            style="width: 200%"
            router
          >
            <el-submenu v-for="(item, i) in navlist" :key="i" :index="i + ''">
              <template slot="title">
                <i
                  v-if="i == 0"
                  class="el-icon-setting"
                  style="color: #dcdde1"
                ></i>
                <i
                  v-else
                  class="el-icon-video-camera-solid"
                  style="color: #dcdde1"
                ></i>
                <span>{{ item.name }}</span>
              </template>
              <el-menu-item-group>
                <el-menu-item
                  v-for="(item2, j) in item.children"
                  :key="j"
                  :index="i + '-' + j"
                  @click="history(i, j)"
                  >{{ item2 }}</el-menu-item
                >
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </el-col>
      </el-row>
    </div>
    <div class="show-content">
      <router-view />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      navlist: [
        {
          name: "系统管理",
          children: ["账号管理", "用户管理", "订单管理","审核管理"],
        },
        {
          name: "系统监控",
          children: ["轮播图片管理", "金牌阿姨管理", "首页导航管理"],
        },
      ],
      historylist: [],
      username:''
    };
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    //添加历史记录
    history(i, j) {
      let res = this.navlist[i].children[j];
      if (this.historylist.includes(res)) {
        this.historylist.splice(this.historylist.indexOf(res), 1);
      }
      this.historylist.push(res);
    },
    phistory(i) {
      let res = this.historylist[i];
      let r;
      if (res == "个人中心") {
        r = "/personmsg";
      } else {
        this.navlist.forEach((item, i) => {
          if (item.children.includes(res)) {
            let idx = item.children.indexOf(res);
            r = `/${i}-${idx}`;
          }
        });
      }
      this.$router.push({
        path: r,
      });
      this.historylist.splice(i, 1);
      this.historylist.push(res);
    },
    //个人中心
    personmsg() {
      this.$router.push({
        path: "/personmsg",
      });
      if (this.historylist.includes("个人中心")) {
        this.historylist.splice(this.historylist.indexOf("个人中心"), 1);
      }
      this.historylist.push("个人中心");
    },
    cancel() {
      this.$confirm("是否注销登录", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          localStorage.setItem("loginmsg",null)
          this.$message({
            type: "success",
            message: "注销成功!",
          });
          this.$router.push({
            path:"/login"
          })
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
  },
  mounted(){
    this.username = localStorage.getItem("username")
  }
};
</script>

<style scoped>
* {
  padding: 0;
  margin: 0;
}
*::selection {
  background: none;
}
.header {
  background: #3498db;
  font-size: 18px;
  color: #fff;
  font-weight: bold;
}
.header::after {
  display: block;
  content: "";
  clear: both;
}
.header .title {
  width: 14.5%;
  background: #2980b9;
  padding: 19px 0;
  text-align: center;
  letter-spacing: 1.5px;
  float: left;
}
.aside-menu {
  height: 92vh;
  width: 14.5%;
  float: left;
  background: #487eb0;
  padding-top: 10px;
  box-sizing: border-box;
}
.aside-menu .pic {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  padding-left: 15px;
  cursor: pointer;
}
.aside-menu .pic img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.aside-menu .logomsg {
  display: flex;
  margin-bottom: 30px;
}
.msg {
  margin-left: 25px;
  color: #ccc;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.msg h5 {
  color: #ccc;
}
.msg .state {
  font-size: 13px;
}
.msg .state span {
  position: relative;
  margin-left: 14px;
}
.msg .state span:first-child::before {
  position: absolute;
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #27ae60;
  left: -15px;
  top: 4px;
}
i.el-icon-eleme {
  color: #f40;
}
.history {
  height: 62px;
  padding-left: 20px;
  font-size: 14px;
  display: flex;
  align-items: center;
}
.history span {
  cursor: pointer;
  margin-right: 5px;
}
.history span:hover {
  color: #192a56;
}
.state span:last-child:hover {
  cursor: pointer;
  color: #e84118;
}
.show-content {
  width: 85.5%;
  height: 92vh;
  float: left;
  /* padding: 10px 0 0 7px; */
  box-sizing: border-box;
  /* background: #dcdde1; */
}
</style>